<template>
	<view style="display: flex;flex-direction: column;padding-top: 30rpx;">
		<uni-row :span="24">
			<uni-col :push="2" :span="20">
			<view style="display: flex;width:100%">
				<view style="width: 50%;text-align: center;background-color: azure;line-height: 60px;" @click="showDrawer('showLeft')"><text>筛选</text></view>
				<view style="width: 50%;text-align: center;background-color:aliceblue;line-height: 60px;" @click="getBookList()"><text>刷新</text></view>
			</view>
			<!-- 抽屉内的搜索 -->
			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">			
			<view style="display: flex;flex-direction: column;padding:60rpx">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="书名" name="bookName">
						<uni-easyinput type="text" v-model="formData.bookName" placeholder="请输入书籍名" />
					</uni-forms-item>
					<uni-forms-item label="作者名" name="authorName">
						<uni-easyinput type="text" v-model="formData.authorName" placeholder="请输入作者名" />
					</uni-forms-item>
					<uni-forms-item label="类型" name="type">
						<uni-data-select
						  v-model="formData.type"
						  :localdata="bookType"
						></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="状态" name="isLend">
						<uni-data-select
						  v-model="formData.isLend"
						  :localdata="isLend"
						></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<view style="display: flex;">
					<button @click="submitForm('showLeft')">查询</button>
					<button @click="reset()">重置</button>
				</view>
			</view>
			</uni-drawer>
			<!-- 循环打印出的书籍 -->
			<view class="book" v-for="(item,index) in bookList" :key="index" @click="BookMessageView(item.id)">
				<view style="margin-bottom: 30rpx;background-color: #bd0509;height: 40rpx;" />
				<view class="bookMessage">
					<view class="bookImg" style="width:150rpx">
						<image :src="item.bookImage" style="width:150rpx;height: 180rpx;"></image>
					</view>
					<view class="bookText" style="display: flex;flex-direction: column;width:450rpx;margin-left: 30px;">
						<view class="bookTitle" style="font-size: 20px;font-weight: 800;">
							{{ item.bookName }}
						</view>
						<view class="bookauthor" style="font-size: 16px;">
							{{ item.bookAuthor }}
						</view>
						<view class="bookIntroduction">
							{{ item.introduction }}
						</view>
					</view>
				</view>
			</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
    import { getBook,screenBook,getBookImg } from '@/utils/book.js'
	import BASE_URL from '@/utils/env.js'
	export default {
	  data() {
	    return {
		//书籍类型
	    bookType: [
	      { value: '0', text: "科学" },
	      { value: '1', text: "文学" },
	      { value: '2', text: "神秘" },
	    ],
		//书籍状态
	    isLend:[
	  	{ value:'0',text:"未借用"},
	  	{ value:'1',text:"已借用"}, 
	    ],
		//查询表单
		formData: {
		bookName:'',
		authorName:'',
		type:'',
		isLend:'',
		},
		//书籍列表
		bookList:[],
		//用于替换的图片地址
		abcUrl:'',
	    };
	  },
	  created(){
		  this.getBookList()
	  },
	  methods: {
		// 查询搜索条件并关闭搜索框
	    submitForm(e) {
		this.$refs[e].close()
		const params = {
			...this.formData
		}
		screenBook(params).then(res=>{
			this.bookList = res.data
			this.bookList.forEach((item,index)=>{
				item.bookImage = BASE_URL+item.bookImage
			})
		})
	    },
		// 展开搜索框
		showDrawer(e) {
			this.$refs[e].open()
		},
		// 判断展开时是左边还是右边
		change(e, type) {
			this[type] = e
		},
		//进入页面查询书籍列表
		getBookList(){
			getBook().then(res =>{
				 if(res.code === 200){
					this.bookList = res.data
					const getImg = async _ =>{
						this.bookList.forEach( async item =>{
							this.abcUrl = await this.getBookImgList(item.bookImage)
							item.bookImage = []
							item.bookImage.push(BASE_URL+this.abcUrl.data[0].bookurl)
						})
					}
					getImg()
				}
			})
		},
		//获取封面图片
		getBookImgList(data){
			let params = {
				id:data
			}
			return getBookImg(params)
		},
		//为什么这里的await没有生效，没有等待this.getBookImgList完成后再进行下一次循环
		// //进入页面查询书籍列表
		// getBookList(){
		// 	getBook().then(res =>{
		// 		if(res.code === 200){
					// this.bookList = res.data
					// const getImg = async _ =>{
					// 	this.bookList.forEach( async item =>{
					// 		await this.getBookImgList(item.bookImage)
					// 		console.log(Date.now(),'2拼接图片地址')
					// 		item.bookImage = BASE_URL+this.imgurl
					// 		console.log(this.imgurl)
					// 		console.log(item.bookImage)
					// 	})
					// }
					// getImg()
		// 		}
		// 	})
		// },
		// //获取封面图片
		// getBookImgList(data){
		// 	let params = {
		// 		id:data
		// 	}
		// 	getBookImg(params).then(res =>{
		// 		if(res.code == 200){
		// 			this.imgurl = res.data[0].bookurl
		// 			return this.imgurl
		// 			console.log(Date.now(),this.imgurl,'1获取图片地址')
		// 		}
		// 	})
		// },
		// 查看书籍详情
		BookMessageView(data){
			const id = data
			uni.navigateTo( {url:`/pages/bookMessage/index?key=${id}`})
		},
		//测试
		reset(){
			this.formData = {
			bookName:'',
			authorName:'',
			type:'',
			isLend:'',
			},
			this.submitForm('showLeft')
		}
	  },
	};
</script>

<style>
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding: 5px 15px;
	}
	.close {
		padding: 10px;
	}
	.book{
		display: flex;
		flex-direction: column;
		border:1px solid #bd0509;
		margin-top:30rpx;
	}
	.bookIntroduction{
		font-size:12px;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		display:-webkit-box;
	}
	.bookMessage{
		padding:30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}
</style>